<template>
    <div class="bigBox" ref="bigBox">
        <div class="top" v-show="allData">
            <a-input placeholder="关键词搜索" allowClear style="width: 200px;" v-model:value="keyWord"></a-input>
            <h1>
                <div>更新时间：{{ allData.LastUpdate }} </div>
                <div>总数：{{ allData.Total }}</div>
                <div>总页数：{{ Math.ceil(allData.Total / size) }}</div>
            </h1>
        </div>
        <ul>
            <li v-show="item.title.includes(keyWord) || item.copyright.includes(keyWord)" v-for="item in showData"
                v-slide-in="{ distance: 100, time: 500 }">
                <photo-provider :default-backdrop-opacity="0.5">
                    <photo-consumer style="width: 100%" :intro="item.title" :src="'https://bing.com/' + item.url">
                        <img v-lazy="'https://bing.com/' + item.url" alt="" />
                    </photo-consumer>
                </photo-provider>
                <h1>
                    {{ item.title }}
                </h1>
                <h2>
                    {{ item.copyright }}
                </h2>
            </li>
        </ul>
        <Loading :show="show"></Loading>
        <BackTop :dom="bigBox"></BackTop>

    </div>
    <div class="floor">
        <a-button type="default" :icon="h(LikeTwoTone)" @click="lastPage">上一页</a-button>
        <a-button type="primary" :icon="h(DislikeFilled)" @click="nextPage">下一页</a-button>
    </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, Ref, h } from 'vue';
import { getBingImg } from '@/api/index'
import { LikeTwoTone, DislikeFilled } from '@ant-design/icons-vue'
const allData: any = ref('')
const show = ref(true)
const bigBox: Ref<HTMLDivElement | null> = ref(null)
const keyWord = ref('')
let start = 1
let size = 50
let showData: any = ref([])
const getData = async () => {
    show.value = false
    const result = await getBingImg()
    allData.value = result
    show.value = true
    computerShowData()
}
const computerShowData = () => {
    showData.value = []
    nextTick(() => {
        showData.value = allData.value.data.slice((start - 1) * size, start * size)
    })
}
const lastPage = () => {
    if (start > 1) {
        start--
        computerShowData()
    }
}
const nextPage = () => {
    if (start < Math.ceil(allData.value.Total / size)) {
        start++
        computerShowData()
    }
}
onMounted(() => {
    getData()
})
</script>
<script lang="ts">
export default {
  name: 'bing',
}
</script>

<style lang="scss" scoped>
.bigBox {
    font-size: 18px;
    height: 100%;
    overflow: auto;
    position: relative;
    @include scroll-bar();

    .top {
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: var(--backColor);

        h1 {
            font-size: 18px;
            margin: 0 10px;
            display: flex;
            font-weight: bold;

            div {
                margin: 0 10px;
            }
        }
    }

    ul {
        list-style-type: none;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding-bottom: 52px;

        li {
            padding: 10px;
            box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.303);
            overflow: hidden;


            img {
                width: 100%;
                min-height: 50%;
                cursor: pointer;
                transition: all .5s;

                &:hover {
                    scale: 0.95;
                    box-shadow: 0 0 30px 0px var(--themeColor);
                }
            }

            h1,
            h2 {
                font-size: 18px;
                text-indent: 2rem;
                margin: 0;
                margin-top: 10px;
            }
        }
    }


}

.floor {
    padding: 10px 30px;
    left: 0;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 52px;
    display: flex;
    justify-content: space-between;
}
</style>